<template>
  <iframe
    title="人员选择"
    ref="userSelectIframe"
    style="
      overflow: hidden;
      width: 100%;
      height: 540px;
      border: thin none;
      outline: none;
      padding: 0;
      margin: 0;
      display: inline;
    "
    sandbox="allow-modals allow-forms allow-popups allow-scripts allow-top-navigation allow-same-origin"
    :src="selectConfig.userSelectIframeUrl"
  ></iframe>
</template>

<script setup>
const emit = defineEmits();
const props = defineProps({
  selectType: {
    type: String,
    required: true,
    default: "p",
  },
  selectConfig: {
    type: Object,
    required: true,
    default: () => ({
      userSelectIframeUrl: "/", // 人员弹窗列表地址
      cookieDomain: "/", // cookie域
      postMessageTargetOrigin: "/", // postMessage接收域
      converter: {}, //转换器 如果是空对象 返回id和人名, 如果是null 返回两个人名
    }),
  },
  maxCount: {
    // 最大选择人数
    type: Number,
    default: 1, //默认1人
  },
});

import { onMounted } from "vue";
// 选择人员弹窗事件
const iframeSetCookie = () => {
  /*
   * wConfig参数说明

   * selectCategory 选择类型
   *  - 可选择值有 p=公司个人,d=部门,sg=私有群组,vv=私有个人,g=公司
   *
   * maxCount 最大选择人数
   *
   * sRang 人员范围
   *  - “city” 显示市级 不传或其他就显示全省
   *
   * company 公司名称
   *
   * department 部门名称
   *
   * kWord 关键词
   */
  const jsonData = JSON.stringify({
    selectCategory: props.selectType,
    maxCount: props.maxCount,
    converter: props.selectConfig.converter,
  });
  // 设置cookie
  const expireDate = new Date();
  expireDate.setMinutes(expireDate.getMinutes() + 2);
  const domain = props.selectConfig.cookieDomain;
  SetCookie("tmpx110", jsonData, expireDate, "/", domain, false);
};

// 设置cookie
const SetCookie = (name, value, expires, path, domain, secure) => {
  const cookieParts = [];
  cookieParts.push(name + "=" + escape(value));
  if (expires) {
    cookieParts.push("expires=" + expires.toGMTString());
  }
  if (path) {
    cookieParts.push("path=" + path);
  }
  if (domain) {
    cookieParts.push("domain=" + domain);
  }
  if (secure) {
    cookieParts.push("secure");
  }
  document.cookie = cookieParts.join("; ");
};
// 选中的人员名称
const choiceUserNames = ref("");
// 选中的人员ID
const choiceUserIds = ref("");
// 挂载后执行
onMounted(() => {
  const { postMessageTargetOrigin } = props.selectConfig;
  // 监听 message 事件
  window.addEventListener("message", function (event) {
    if (event.origin === postMessageTargetOrigin) {
      [choiceUserIds.value, choiceUserNames.value] = event.data;
      // 将接收到的消息数据解构赋值给choiceUserIds和choiceUserNames
      const data = choiceUserNames.value.split(";").map((item) => {
        return {
          // 将choiceUserNames按照";"进行分割后遍历每个元素，生成一个对象数组
          userName: item.split("/")[0],
          // 从每个元素中分割出人名，赋值给name属性
        };
      });
      // 获取人员id
      choiceUserIds.value.split(";").map((item, index) => {
        data[index].userId = item;
      });
      // 将生成的对象数组emit为"personalInformation"事件
      emit("getSelectUserInfo", data);
    }
  });

  iframeSetCookie();
});
</script>
